
.euiButtonToggle__wrapper {
  display: inline-block;

  // Transform the whole thing so that the button doesn't
  // steal pointer events from input
  &:not(.euiButtonToggle--isDisabled) {
    transition: transform $euiAnimSpeedNormal $euiAnimSlightBounce;

    &:hover {
      transform: translateY(-1px);
    }

    &:focus {
      animation: euiButtonActive $euiAnimSpeedNormal $euiAnimSlightBounce;
    }

    &:active {
      transform: translateY(1px);
    }
  }
}

.euiButtonToggle {
  @include euiButtonToggleStates {
    text-decoration: underline;
  }

  &.euiButtonToggle--isIconOnly {
    min-width: 0;

    .euiButton__content {
      padding: 0 $euiSizeS;
    }

    .euiButton__text:empty {
      display: none;
    }
  }

  &.euiButtonToggle--isEmpty {
    border-color: transparent;
    background-color: transparent;
    box-shadow: none;
  }
}

// Modifier naming and colors.
$euiButtonToggleTypes: (
  primary: $euiColorPrimary,
  secondary: $euiColorSecondary,
  warning: $euiColorWarning,
  danger: $euiColorDanger,
  ghost: $euiColorGhost, // Ghost is special, and does not care about theming.
  text: $euiColorDarkShade, // Reserved for special use cases
);

// Add hover states based on input state
@each $name, $color in $euiButtonToggleTypes {
  .euiButtonToggle[class*='#{$name}'] {
    @include euiButtonToggleStates {
      background-color: transparentize($color, .9);
    }

    // Not using the full button class here as it's targeting a different component,
    // instead we know what the modifier is, so just look for that somwhere in the classNames
    &[class*='fill'] {
      @include euiButtonToggleStates {
        background-color: darken($color, 5%);
        border-color: darken($color, 5%);
      }
    }
  }
}
